<template>
  <div>
    <div class="prd-img">
      <img src="@/assets/product.jpg"/>
    </div>
    <div class="prd-info">
      <ul>
        <li>{{productInfo.name}}</li>
        <li>价格：{{productInfo.price}}</li>
        <li>剩余数量：{{productInfo.count}}</li>
        <li>
          <el-button type="primary" @click="addToShoppingCart">加入购物车</el-button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      productInfo: {
        id: 1,
        name: '小米8手机',
        price: '2999元',
        count: 99,
      }
    }
  },
  methods: {
    addToShoppingCart() {
      this.$emit('addToShoppingCart', this.productInfo);
    },
  }
}
</script>
<style>
  ul li {
    list-style-type: none;
    text-align: left;
    margin-bottom: 10px;
  }
  .prd-img {
    float: left;
  }
  .prd-img img {
    max-height: 450px;
  }
  .prd-info {
    padding-top: 50px;
  }
</style>
